
var Content=React.createClass({
	getInitialState:function(){
		return {
			contentData:[]
		}
	},
	componentWillReceiveProps:function(props){
		var options=props.options,
			socialAccount=options.socialAccount,
			appId=socialAccount.app_id;

		if(appId!=this.appId){
			options.contentData(this,appId);
			this.appId=appId
		}
	},
	chartMap:[
        {
			title:'近30天PV/UV',
			width:12,
			height:300,
			type:'line',
			datePick:true,
			row:1,
			getData:function(param,callback){
				setTimeout(function(){
					callback([{
				        "key": "1/1",
				        "pv": 13,
                        "uv": 7
				    }, {
				        "key": "1/2",
				        "pv": 23,
                        "uv": 15
				    }, {
				        "key": "1/3",
				        "pv": 26,
                        "uv": 17
				    }, {
				        "key": "1/4",
				        "pv": 16,
                        "uv": 11
				    }, {
				        "key": "1/5",
				        "pv": 22,
                        "uv": 27
				    }, {
				        "key": "1/6",
				        "pv": 31,
                        "uv": 25
				    }, {
				        "key": "1/7",
				        "pv": 13,
                        "uv": 22
				    }, {
				        "key": "1/8",
				        "pv": 16,
                        "uv": 28
				    }, {
				        "key": "1/9",
				        "pv": 19,
                        "uv": 32
				    }, {
				        "key": "1/10",
				        "pv": 22,
                        "uv": 16
				    }, {
				        "key": "1/11",
				        "pv": 26,
                        "uv": 14
				    }, {
				        "key": "1/12",
				        "pv": 13,
                        "uv": 23
				    }, {
				        "key": "1/13",
				        "pv": 21,
                        "uv": 10
				    }, {
				        "key": "1/14",
				        "pv": 25,
                        "uv": 9
				    }, {
				        "key": "1/15",
				        "pv": 13,
                        "uv": 17
				    }, {
				        "key": "1/16",
				        "pv": 36,
                        "uv": 24
				    }, {
				        "key": "1/17",
				        "pv": 27,
                        "uv": 16
				    }, {
				        "key": "1/18",
				        "pv": 18,
                        "uv": 29
				    }, {
				        "key": "1/19",
				        "pv": 29,
                        "uv": 20
				    }, {
				        "key": "1/20",
				        "pv": 31,
                        "uv": 21
				    }, {
				        "key": "1/21",
				        "pv": 23,
                        "uv": 33
				    }, {
				        "key": "1/22",
				        "pv": 14,
                        "uv": 24
				    }, {
				        "key": "1/23",
				        "pv": 26,
                        "uv": 31
				    }, {
				        "key": "1/24",
				        "pv": 38,
                        "uv": 27
				    }, {
				        "key": "1/25",
				        "pv": 20,
                        "uv": 39
				    }, {
				        "key": "1/26",
				        "pv": 32,
                        "uv": 22
				    }, {
				        "key": "1/27",
				        "pv": 35,
                        "uv": 32
				    }, {
				        "key": "1/28",
				        "pv": 27,
                        "uv": 34
				    }, {
				        "key": "1/29",
				        "pv": 19,
                        "uv": 26
				    }, {
				        "key": "1/30",
				        "pv": 30,
                        "uv": 41
				    }, {
				        "key": "1/31",
				        "pv": 23,
                        "uv": 33
				    }])
				},1000)
			},
			isLocked:true
		},
		{
			title:'男女比例',
			width:6,
			height:250,
			type:'pie',
			row:2,
			getData:function(param,callback){
				setTimeout(function(){
					callback([
						{
							"gender": "男士",
							"value": 449
						},{
							"gender": "女士",
							"value": 302
						}
					])
				},1000)
			},
			isLocked:true
		},
		{
			title:'情绪分布',
			width:6,
			height:250,
			type:'stacked-bar',
			datePick:true,
			row:2,
			getData:function(param,callback){
				setTimeout(function(){
					callback([{
				        "key": '周一',
				        "开心": 12,
				        "愤怒": 25,
				        "悲哀": 12,
				        "兴奋": 10
				    }, {
				        "key": '周二',
				        "开心": 13,
				        "愤怒": 13,
				        "悲哀": 16,
				        "兴奋": 12
				    }, {
				        "key": '周三',
				        "开心": 18,
				        "愤怒": 20,
				        "悲哀": 12,
				        "兴奋": 14
				    }, {
				        "key": '周四',
				        "开心": 21,
				        "愤怒": 25,
				        "悲哀": 12,
				        "兴奋": 18
				    }, {
				        "key": '周五',
				        "开心": 21,
				        "愤怒": 18,
				        "悲哀": 12,
				        "兴奋": 17
				    }, {
				        "key": '周六',
				        "开心": 25,
				        "愤怒": 10,
				        "悲哀": 22,
				        "兴奋": 24
				    }, {
				        "key": '周日',
				        "开心": 28,
				        "愤怒": 16,
				        "悲哀": 10,
				        "兴奋": 21
				    }])
				},1000)
			},
			isLocked:true
		},
		{
			title:'近一周年龄分布',
			width:6,
			height:300,
			type:'bar',
			datePick:true,
			row:3,
			getData:function(param,callback){
				setTimeout(function(){
					callback([ {
						"country": "15以下",
						"visits": 100
					}, {
						"country": "15-20",
						"visits": 382
					}, {
						"country": "20-25",
						"visits": 809
					}, {
						"country": "25-35",
						"visits": 622
					}, {
						"country": "35-45",
						"visits": 422
					}, {
						"country": "45以上",
						"visits": 314
					}])
				},1000)
			},
			isLocked:true
		},
        {
			title:'近一周照片',
			width:6,
			height:250,
			type:'index',
			row:3,
			getData:function(param,callback){
				setTimeout(function(){
					callback([{
						name:'用户总数',
						value:'150',
						icon:'user',
						className:'bg-aqua'
					},{
						name:'照片总数',
						value:'1500',
						icon:'image',
						className:'bg-green'
					}])
				},1000)
			 },
			 isLocked:true
		}
	],
	render:function(){
		var options=this.props.options,
			socialAccount=options.socialAccount,
			appId=socialAccount.app_id,
			contentData=this.state.contentData || [],
			rows=_.values(_.groupBy(this.chartMap,'row'));

		return (
			<div>
				<section className="content-header">
					<h1>
						客流跟踪报表<small>{socialAccount.name}</small>
					</h1>
				</section>
				<div className="content">
					<div className="row">
		                <div className="col-md-12">
		                	
		                </div>
		            </div>
		            {rows.map(function(row,index){
	                	var height=_.max(_.pluck(row,'height'));

	                	return <div key={index} className="row">
	                		<div className="col-md-12">
		                		{row.map(function(chart,index2){
		                			chart.height=height;
		                			return <ReactReports key={index2} options={chart} />
		                		})}
		                	</div>
	                	</div>
	                })}
		        </div>
	        </div>
		)
	}
});

/*报表入口*/
var ReactReports = React.createClass({
	getInitialState:function(){
		return {
			data:null,
			startDate:moment().subtract(29, 'days').format('YYYY-MM-DD'),
			endDate: moment().format('YYYY-MM-DD'),
			isPending:false
		}
	},
	/*shouldComponentUpdate:function(nextProps,nextState){
		return JSON.stringify(nextState.data)!=JSON.stringify(this.state.data)
	},*/
	componentDidMount:function(){
		this.getData()
	},
	changeDate:function(start,end){
		var self=this,
			options=this.props.options,
			state=this.state;

		this.setState({
			startDate:start.format('YYYY-MM-DD'),
			endDate:end.format('YYYY-MM-DD')
		},function(){
			self.getData()
		})
	},
	getData:function(){
		var self=this,
			options=this.props.options,
			state=this.state;

		if(options.getData){
			this.setState({
				isPending:true
			},function(){
				options.getData(state,function(data){
					self.setState({
						data:data,
						isPending:false
					})
				})
			})
		}
	},
	render:function(){
		var options=this.props.options,
			data=this.state.data,
			isPending=this.state.isPending,
			getData=this.getData;

		return (
			<div className={"col-md-"+options.width}>
				<div className={options.type=='pie'?"box box-info"
                    :options.type=='bar'?"box box-success"
                    :options.type=='line'?"box box-primary"
                    :options.type=='stacked-bar'?"box box-danger"
                    :"box box-warning"}>
					<div className="box-header with-border">
						<h3 className="box-title" style={{fontSize:'16px'}}>{options.title}</h3>
						<div className="box-tools pull-right">
							{/*{options.datePick?<ReactDatePick changeDate={this.changeDate} />:''}*/}
						</div>
					</div>
					<div className="box-body">
						<div ref="legend"></div>
						<div className="chart" style={{height:options.height}}>
							{(function(){
								if(!isPending){
									if(data){
										switch (options.type){
											case 'index':
												return <IndexChart options={options} data={data} />;
											case 'pie':
												return <PieChart options={options} data={data} />;
											case 'bar':
												return <BarChart options={options} data={data} />;
											case 'stacked-bar':
												return <StackedBarChart options={options} data={data} />;
											case 'line':
												return <LineChart options={options} data={data} />
										}
									}else{
										return <ReLoad getData={getData} />
									}
								}else{
									return <Loading />
								}
							})()}
						</div>
					</div>
				</div>
			</div>
		)
	}
});

var ReLoad = React.createClass({
	render:function(){
		return (
			<div className="overlay" onClick={this.props.getData}>
				<i className="fa fa-refresh" style={{marginLeft:'-76px',color:'#aaa',cursor:'pointer'}}> 重新加载</i>
			</div>
		)
	}
});

var Loading = React.createClass({
	render:function(){
		return (
			<div className="overlay">
				<i className="fa fa-refresh fa-spin"></i>
			</div>
		)
	}
});

/*照片展示*/
var IndexChart = React.createClass({
	render:function(){
		var options=this.props.options,
			data=this.props.data;

		return (
			<div id="carousel-example-generic" className="carousel slide" data-ride="carousel">
				<ol className="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1" className=""></li>
					<li data-target="#carousel-example-generic" data-slide-to="2" className=""></li>
				</ol>
				<div className="carousel-inner">
					<div className="item active">
						<img src="http://placehold.it/900x500/39CCCC/ffffff&amp;text=I+Love+Bootstrap" alt="第一张照片"/>

						<div className="carousel-caption">
							<font><font>第一张照片</font></font>
						</div>
					</div>
					<div className="item">
						<img src="http://placehold.it/900x500/3c8dbc/ffffff&amp;text=I+Love+Bootstrap" alt="第二张照片"/>

						<div className="carousel-caption">
							<font><font>第二张照片</font></font>
						</div>
					</div>
					<div className="item">
						<img src="http://placehold.it/900x500/f39c12/ffffff&amp;text=I+Love+Bootstrap" alt="第三张照片"/>

						<div className="carousel-caption">
							<font><font>第三张照片</font></font>
						</div>
					</div>
				</div>
				<a className="left carousel-control" href="#carousel-example-generic" data-slide="prev">
					<span className="fa fa-angle-left"></span>
				</a>
				<a className="right carousel-control" href="#carousel-example-generic" data-slide="next">
					<span className="fa fa-angle-right"></span>
				</a>
			</div>
		)
	}
});

/*饼状图*/
var PieChart = React.createClass({
	componentDidMount:function(){
		this.componentDidUpdate()
	},
	componentDidUpdate:function(){
		var data=this.props.data;

		AmCharts.makeChart(this.refs.chart, {
			"type": "pie",
			"theme": "light",
             "legend": {
				"horizontalGap": 10,
				"maxColumns": 1,
				"position": "right",
                "align" : "center",
				"useGraphSettings": false,
				"markerSize": 10
			},
			"dataProvider":data,
			"valueField": "value",
			"titleField": "gender",
			"pullOutRadius":0,
			"balloon":{
				"fixedPosition":true
			}
		});
	},
	render:function(){
		var options=this.props.options;

		return (
			<div ref="chart" style={{height:options.height}}></div>
		)
	}
});

/*柱状图*/
var BarChart = React.createClass({
	componentDidMount:function(){
		this.componentDidUpdate()
	},
	componentDidUpdate:function(){
		var data=this.props.data;

		AmCharts.makeChart(this.refs.chart, {
		  "type": "serial",
		  "theme": "light",
		  "dataProvider":data,
		  "valueAxes": [ {
		    "gridColor": "#FFFFFF",
		    "gridAlpha": 0.2,
		    "dashLength": 0,
            "title": "人数"
		  } ],
		  "gridAboveGraphs": true,
		  "startDuration": 1,
		  "graphs": [{
		    "balloonText": "[[category]]: <b>[[value]]</b>",
		    "fillAlphas": 0.8,
		    "lineAlpha": 0.2,
		    "type": "column",
		    "valueField": "visits"
		  }],
		  "chartCursor": {
		    "categoryBalloonEnabled": false,
		    "cursorAlpha": 0,
		    "zoomable": false
		  },
		  "categoryField": "country",
		  "categoryAxis": {
		    "gridPosition": "start",
		    "gridAlpha": 0,
		    "tickPosition": "start",
		    "tickLength": 20,
            "title": "年龄范围"
		  }

		} );
	},
	render:function(){
		var options=this.props.options;

		return (
			<div ref="chart" style={{height:options.height}}></div>
		)
	}
});

/*柱状堆积图*/
var StackedBarChart = React.createClass({
	componentDidMount:function(){
		this.componentDidUpdate()
	},
	componentDidUpdate:function(){
		var data=this.props.data;

		AmCharts.makeChart(this.refs.chart, {
			"type": "serial",
			"theme": "light",
			"legend": {
				"horizontalGap": 10,
				"maxColumns": 4,
				"position": "top",
                "align" : "left",
				"useGraphSettings": true,
				"markerSize": 10
			},
			"dataProvider":data,
			"valueAxes": [{
		        "stackType": "regular",
		        "axisAlpha": 0.3,
		        "gridAlpha": 0,
                "title": "人数"
		    }],
			"graphs":_.rest(_.keys(data[0])).map(function(i){
				return {
			        "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
			        "fillAlphas": 0.8,
			        "labelText": "[[value]]",
			        "lineAlpha": 0.3,
			        "title": i,
			        "type": "column",
					"color": "#000000",
			        "valueField": i
			    }
			}),
			"categoryField": "key",
		    "categoryAxis": {
		        "gridPosition": "start",
		        "axisAlpha": 0,
		        "gridAlpha": 0,
		        "position": "left"
		    }
		} );
	},
	render:function(){
		var options=this.props.options;

		return (
			<div ref="chart" style={{height:options.height}}></div>
		)
	}
});

/*折线图*/
var LineChart = React.createClass({
	componentDidMount:function(){
		this.componentDidUpdate()
	},
	componentDidUpdate:function(){
		var data=this.props.data;

		AmCharts.makeChart(this.refs.chart, {
		    "type": "serial",
		    "theme": "light",
            "legend": {
				"horizontalGap": 10,
				"maxColumns": 4,
				"position": "top",
                "align" : "left",
				"useGraphSettings": true,
				"markerSize": 10
			},
		    "marginLeft": 40,
		    "autoMarginOffset": 20,
		    "valueAxes": [{
		        "id": "v1",
		        "axisAlpha": 0,
		        "position": "left",
		        "ignoreAxisWidth":true
		    }],
            // "graphs":_.rest(_.keys(data[0])).map(function(i){
			// 	return {
			//         "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
			//        // "fillAlphas": 0.8,
			//        // "labelText": "[[value]]",
			//        // "lineAlpha": 0.3,
			//         "title": i,
			//         //"type": "column",
			// 		//"color": "#000000",
			//         "valueField": i
			//     }
			// }),
		    "graphs": [{
		        "balloon":{
		          "drop":true,
		          "adjustBorderColor":false,
		          "color":"#ffffff"
		        },
		        "bullet": "round",
		        "bulletBorderAlpha": 1,
		        "bulletColor": "#FFFFFF",
		        "bulletSize": 5,
		        "hideBulletsCount": 50,
		        "lineThickness": 2,
		        "title": "uv",
		        "useLineColorForBulletBorder": true,
		        "valueField": "uv",
		        "balloonText": "<span style='font-size:18px;'>[[uv]]</span>"
		    },{
		        "balloon":{
		          "drop":true,
		          "adjustBorderColor":false,
		          "color":"#ffffff"
		        },
		        "bullet": "round",
		        "bulletBorderAlpha": 1,
		        "bulletColor": "#FFFFFF",
		        "bulletSize": 5,
		        "hideBulletsCount": 50,
		        "lineThickness": 2,
		        "title": "pv",
		        "useLineColorForBulletBorder": true,
		        "valueField": "pv",
		        "balloonText": "<span style='font-size:18px;'>[[pv]]</span>"
		    }],
		    "chartCursor": {
		        "pan": true,
		        "valueLineEnabled": true,
		        "valueLineBalloonEnabled": true,
		        "cursorAlpha":1,
		        "cursorColor":"#258cbb",
		        "limitToGraph":"g1",
		        "valueLineAlpha":0.2,
		        "valueZoomable":true
		    },
		    "categoryField": "key",
		    "dataProvider":data
		});
	},
	render:function(){
		var options=this.props.options;

		return (
			<div ref="chart" style={{height:options.height}}></div>
		)
	}
});